<!DOCTYPE html>
<html>

<head>
    <title>EnhancedVirtualSelect Demo</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <style>
        .select-wrapper {
            padding: 15px;
        }
        .select-item {
            margin-bottom: 15px;
        }
    </style>
</head>

<body class="layui-form">
    <div class="layui-container">
        <div class="layui-row select-wrapper">
            <!-- 省份选择 -->
            <div class="layui-col-md6 select-item">
                <label class="layui-form-label">省份选择：</label>
                <div class="layui-input-block">
                    <select name="provinceSelect" id="provinceSelect" lay-filter="provinceSelect" 
                        lay-search lay-creatable lay-verify="required">
                    </select>
                </div>
            </div>

            <!-- 城市选择 -->
            <div class="layui-col-md6 select-item">
                <label class="layui-form-label">城市选择：</label>
                <div class="layui-input-block">
                    <select name="citySelect" id="citySelect" lay-filter="citySelect" 
                        lay-search lay-verify="required">
                    </select>
                </div>
            </div>

           

            <!-- 区域选择 -->
            <div class="layui-col-md6 select-item">
                <label class="layui-form-label">区域选择：</label>
                <div class="layui-input-block">
                    <select name="areaSelect" id="areaSelect" lay-filter="areaSelect" 
                        lay-search lay-verify="required">
                    </select>
                </div>
            </div>
             <!-- 提交测试按钮 -->
             <div class="layui-col-md6 select-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="formTest">提交测试</button>
                </div>
            </div>
        </div>

        <!-- 动态生成的选择器容器 -->
        <div class="layui-row select-wrapper" id="dynamicSelects"></div>
    </div>

    <!-- 1. 首先加载 layui -->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    
    <!-- 2. 加载依赖库 -->
    <script src="performance-monitor.js"></script>
    <!-- <script src="layuiform-virtual-select.js"></script> -->
    <script src="layuiform-virtual-select-vanilla.js"></script>

    <!-- 3. 业务代码 -->
    <script>
        window.addEventListener('load', function() {
            layui.use(['form', 'layer'], function() {
                const form = layui.form;
                const layer = layui.layer;
                const $ = layui.$;

                // 监听表单提交
                form.on('submit(formTest)', function(data) {
                    console.log('表单提交数据:', data.field);
                    layer.alert(JSON.stringify(data.field, null, 2), {
                        title: '当前表单数据'
                    });
                    return false;
                });

                // 生成动态选择器的函数
                function createDynamicSelects(dataMap) {
                    const container = document.getElementById('dynamicSelects');
                
                    Object.keys(dataMap).forEach(selectId => {
                        if (['provinceSelect', 'citySelect', 'areaSelect'].includes(selectId)) {
                            return;
                        }

                        const selectContainer = document.createElement('div');
                        selectContainer.className = 'layui-col-md6 select-item';
                        selectContainer.innerHTML = `
                            <label class="layui-form-label">${selectId}：</label>
                            <div class="layui-input-block">
                                <select 
                                    name="${selectId}" 
                                    id="${selectId}" 
                                    lay-filter="${selectId}"
                                    lay-search
                                >
                                </select>
                            </div>
                        `;
                        container.appendChild(selectContainer);

                        form.on(`select(${selectId})`, function(data) {
                            if (data.value) {
                                const selectedText = data.elem[data.elem.selectedIndex]?.text || data.value;
                                layer.msg(`选择了 ${selectedText} (${data.value})`);
                            }
                        });
                    });

                    form.render('select');
                }

                // 生成测试数据
                // 修改生成测试数据的方法
                function generateMockData(prefix, count) {
                    // 直接返回数组而不是生成器对象
                    return Array.from({ length: count }, (_, i) => ({
                        value: i,
                        text: `${prefix}-${i}`
                    }));
                }

                // 初始化数据时使用合理的数据量
                const dataMap = {
                    'provinceSelect': generateMockData('省份', 5000),
                    'citySelect': generateMockData('城市', 800),
                    'areaSelect': generateMockData('区域', 1000),
                    'select4': generateMockData('下拉框4', 1200),
                    'select5': generateMockData('下拉框5', 15000),
                    'select6': generateMockData('下拉框6', 9000),
                    'select7': generateMockData('下拉框7', 11000),
                    'select8': generateMockData('下拉框8', 13000),
                    'select9': generateMockData('下拉框9', 7000),
                    'select10': generateMockData('下拉框10', 14000),
                    'select11': generateMockData('下拉框11', 16000),
                    'select12': generateMockData('下拉框12', 8000),
                    'select13': generateMockData('下拉框13', 10000),
                    'select14': generateMockData('下拉框14', 12000),
                    'select15': generateMockData('下拉框15', 9000),
                    'select16': generateMockData('下拉框16', 11000),
                    'select17': generateMockData('下拉框17', 13000),
                    'select18': generateMockData('下拉框18', 15000),
                    'select19': generateMockData('下拉框19', 8000),
                    'select20': generateMockData('下拉框20', 10000),
                    'select21': generateMockData('下拉框21', 12000),
                    'select22': generateMockData('下拉框22', 14000),
                    'select23': generateMockData('下拉框23', 9000)
                };

                // 创建动态选择器
                createDynamicSelects(dataMap);

                // 初始化虚拟选择器
                const virtualSelect = new LayuiFormVirtualSelect({
                    form,
                    dataMap,
                    $
                });

                // 监听省份选择器
                form.on('select(provinceSelect)', function(data) {
                    if (data.value) {
                        const selectedText = data.elem[data.elem.selectedIndex]?.text || data.value;
                        layer.msg(`选择了 ${selectedText} (${data.value})`);
                    }
                });

                // 监听城市选择器
                form.on('select(citySelect)', function(data) {
                    if (data.value) {
                        const selectedText = data.elem[data.elem.selectedIndex]?.text || data.value;
                        layer.msg(`选择了 ${selectedText} (${data.value})`);
                    }
                });

                // 监听区域选择器
                form.on('select(areaSelect)', function(data) {
                    if (data.value) {
                        const selectedText = data.elem[data.elem.selectedIndex]?.text || data.value;
                        layer.msg(`选择了 ${selectedText} (${data.value})`);
                    }
                });
            });

            // 初始化性能监控
            const monitor = new PerformanceMonitor({
                warningThreshold: 30,
                showPanel: true,
                historySize: 10,
                updateInterval: 500,
                solutionName: 'LayuiFormVirtualSelect方案',
                onFPSUpdate: ({ fps, avgFps }) => {
                    if (fps < 30) {
                        console.warn(
                            `[LayuiFormVirtualSelect方案][${new Date().toLocaleTimeString()}] 性能警告: FPS=${fps}`
                        );
                    }
                }
            });
            monitor.start();
        });
    </script>
</body>
</html>